<template>
  <view class="container">
    <my-navbar-top></my-navbar-top>
    <view class="status">
      <image
        style="width: 92rpx; height: 92rpx"
        :src="`/static/images/${status}.png`"
        mode="scaleToFill"
      />
      <view class="status-title">
        {{ status == 'success' ? '支付成功' : '支付失败' }}
      </view>
      <view class="status-desc"> 订单编号：{{ order_no }} </view>
      <view class="status-button" v-if="status == 'fail'" @click="handlePay">
        重新支付
      </view>
      <view class="status-guide" v-if="status == 'success'" @click="handleMy">
        <view>前往「我的」</view>
        <view>查看订单及物流情况</view>
      </view>
    </view>
	<!-- 库存不足 -->
	<stock-popup ref="stockPopup"></stock-popup>
	<!-- 限购弹框 需要传入文案 -->
	<stock-popup ref="limitPopup" text1="您已超过今日最大购买限额" text2="请理性消费" @close="limitClose"></stock-popup>
  </view>
</template>

<script>
import stockPopup from '@/components/stockPopup.vue'
export default {
  name: 'status',
  components: {
    stockPopup,
  },
  data() {
    return {
      status: 'success', // 状态 success 成功 fail 失败
      order_id: '',
      order_no: '',
    }
  },
  onLoad(e) {
    this.status = e.status
    this.order_id = e.order_id || ''
    this.order_no = e.order_no || ''
  },
  methods: {
    handleMy() {
      uni.navigateTo({
        url: '/pages/order/index',
      })
    },
    handlePay() {
      this.$api
        .orderPay({
          order_id: this.order_id || '',
        })
        .then((res) => {
          if (res.code == 0) {
            // 发起支付
            this.pay(res.data)
            return
          } else if (res.code == -1) {
            this.$refs.stockPopup.openPopup()
          } else if (res.code == -2) {
          	this.$refs.limitPopup.openPopup()  
		  }else {
            uni.showToast({
              title: res.msg,
              icon: 'none',
            })
          }
        })
    },
	limitClose() {
	  // 可以干一些事情
	},
    pay(data) {
      console.log(data)
      wx.requestPayment({
        timeStamp: data.timeStamp,
        nonceStr: data.nonceStr,
        package: data.package,
        signType: data.signType,
        paySign: data.paySign,
        success: (res) => {
          console.log(res)
          if (res.errMsg == 'requestPayment:ok') {
            uni.showToast({
              title: '支付成功',
              icon: 'success',
            })
            this.status = 'success'
            setTimeout(() => {
              uni.redirectTo({
                url:
                  '/pages/settlement/status/index?status=success&order_id=' +
                  data.order_id +
                  '&order_no=' +
                  data.order_no,
              })
            }, 500)
          }
        },
        fail: (res) => {
          console.log(res, 'fail')
          if (res.errMsg == 'requestPayment:fail cancel') {
            uni.showToast({
              title: '支付取消',
              icon: 'none',
            })
          }
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.status {
  flex: 1;
  overflow: hidden;
  padding-top: 300rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  .status-title {
    font-size: 32rpx;
    color: #c9a063;
    margin-top: 20rpx;
  }
  .status-desc {
    font-size: 23rpx;
    color: #545454;
    margin-top: 20rpx;
  }
  .status-button {
    width: 230rpx;
    height: 70rpx;
    background-color: #c9a063;
    border-radius: 2rpx;
    color: #fff;
    font-size: 28rpx;
    text-align: center;
    line-height: 70rpx;
    margin-top: 90rpx;
    font-size: 23rpx;
  }
  .status-guide {
    font-size: 23rpx;
    text-align: center;
    color: #c9a063;
    margin-top: 90rpx;
  }
}
</style>
